<script setup lang="ts">
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";

const props = defineProps({
  path: {
    type: String,
    default:''
  },
});

const router = useRouter();
const location = useRoute();
// const routes = router.options.routes;

// console.log(router);
// console.log(routes);
// console.log(location);
// console.log(props.path);
// console.log(location.hash);


const isActive = computed(() => {
  return !location.path.indexOf(props.path);
});

const itemClick = () => {
  router.replace(props.path);
};


</script>

<template>
  <div class="tab_bar_item" @click="itemClick">
    <div v-if="!isActive">
      <slot name="item-icon">icon</slot>
    </div>
    <div v-else>
      <slot name="item-icon-active"></slot>
    </div>
    <div :class="{ active: isActive }">
      <slot name="item-text">text</slot>
    </div>
  </div>
</template>

<style>
.tab_bar_item {
  text-align: center;
  flex-grow: 1;
  height: 49px;
  font-size: 14px;
}

.tab_bar_item img {
  width: 24px;
  height: 24px;
  margin-top: 3px;
  margin-bottom: 2px;
  vertical-align: middle;
}

.tab_bar_item .active {
  color: orange;
}
</style>
